<template>
    <TopNavBar   title="订单" type="back"  />
  <div class="order-page-bg">
    <div class="order-tabs">
      <div :class="['order-tab', {active: tab === 0}]" @click="tabClick(0)">進行中</div>
      <div :class="['order-tab', {active: tab === 1}]" @click="tabClick(1)">已結束</div>
      <div :class="['order-tab', {active: tab === 2}]" @click="tabClick(2)">已贖回</div>
    </div>
    <div v-for="item in currentList" class="order-card">
      <div class="order-card-header">
        <img class="order-bot-icon" src="/static/img/Qdi_a1526882_15R.d87b23e6.svg" />
        <div class="order-bot-info">
          <div class="order-bot-title">{{ item.planTitle }}</div>
          <div class="order-bot-id">機器人 ID: robot_12</div>
        </div>
        <span v-if="item.status == 2" class="order-status">已贖回</span>
        <span v-if="item.status == 1" class="order-status">已結束</span>
        <span v-if="item.status == 0" class="order-status">進行中</span>
      </div>
      <div class="order-card-time-row">
        <span class="order-time">{{ item.createTime }}</span>
        <button class="order-detail-btn" @click="goDetail(item)">詳情</button>
      </div>
      <div class="order-card-info-row">
        <div class="order-info-label">申購金額</div>
        <div class="order-info-value">{{ item.amount }} USD</div>
      </div>
      <div class="order-card-info-row">
        <div class="order-info-label">當前利潤</div>
        <div class="order-info-value">{{ headerObj.sumEarn }} USD</div>
      </div>
      <div class="order-card-info-row">
        <div class="order-info-label">訂單編號</div>
        <div class="order-info-value">{{ item.orderNo }}</div>
      </div>
    </div>
    <!-- 其他Tab可继续补充 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const tab = ref(0)
const router = useRouter()
import { investmentList, personalIncome } from '@/api/financial/index'
import { _t18 } from '@/utils/public'
import { _toFixed } from '@/utils/decimal'
const headerObj = ref({})
const list = ref([])
const pageNum = ref(1)
const pageSize = ref(5)
const isShow = ref(false)
const loading = ref(false)
const finished = ref(false)
const total = ref(0)
const currentList = ref([])

function goDetail(item) {
  // router.push('/smartquant-order-detail')
  router.push({
    path: '/smartquant-order-detail',
    query: { 
      id: item.id,
      title: item.planTitle,
      earn: item.accumulaEarn,
      status: item.status
    }
  })
}
const tabClick = (value) => {
  tab.value = value
  currentList.value = list.value.filter((item) => {
    return item.status == value
  })
}
const onLoad = async () => {
  try {
    const data = await getInvestment()
    list.value = [...list.value, ...data]
    list.value.length === 0 ? (isShow.value = true) : (isShow.value = false)
    if (list.value.length === total.value) {
      finished.value = true
    }
    currentList.value = list.value
    pageNum.value++
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const allList = async () => {
  try {
    const res = await personalIncome()
    if (res.code === 200) {
      headerObj.value = res.data
    }
  } catch (error) {}
}
const getInvestment = async () => {
  try {
    const res = await investmentList(pageNum.value, pageSize.value)
    if (res.code === 200) {
      total.value = res.total
      return res.rows
    } else {
      finished.value = true
    }
  } catch (error) {}
}
onMounted(() => {
  allList()
  onLoad()
})



</script>

<style scoped>
.order-page-bg {
  background: #f6f7f8;
  min-height: 100vh;
  padding: 0 16px;
}
.order-tabs {
  display: flex;
  background: #fff;
  border-radius: 32px;
  margin: 24px auto 18px auto;
  width: 90%;
  max-width: 400px;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.order-tab {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #111;
  border-radius: 32px;
  padding: 10px 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.order-tab.active {
  background: #111;
  color: #fff;
}
.order-card {
  background: #fff;
  border-radius: 18px;
  margin: 0 auto;
  max-width: 400px;
  padding: 18px 18px 12px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.order-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.order-bot-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  margin-right: 12px;
}
.order-bot-info {
  flex: 1;
}
.order-bot-title {
  font-size: 16px;
  font-weight: bold;
  color: #111;
}
.order-bot-id {
  font-size: 13px;
  color: #bcbcbc;
  margin-top: 2px;
}
.order-status {
  background: #f6f7f8;
  color: #bcbcbc;
  font-size: 13px;
  border-radius: 12px;
  padding: 4px 12px;
  font-weight: 600;
}
.order-card-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.order-time {
  font-size: 15px;
  color: #111;
  font-weight: 600;
}
.order-detail-btn {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.order-card-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #111;
  margin-bottom: 8px;
}
.order-info-label {
  color: #bcbcbc;
}
.order-info-value {
  font-weight: 600;
}
</style> 